<template>
	<div>

		<el-row>
			<el-col :span="24">
				<el-card class="card-image" :style="`background-image: url('/images/cglog.png');`" shadow="hover">
				</el-card>
			</el-col>
		</el-row>
		<div style="height: 20px;"></div>
		<el-row>
			<el-col :span="24">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<el-text size="large">快捷方式</el-text>
					</template>
					<el-row :gutter="20">
						<VueDraggable ref="el" v-model="shortcutList" :animation="500" class="flex" style="width: 100%;"
							@start="onStart" @End="onEnd">
							<el-col class="my-col-item" :title="item.text"
								v-for="(item,key) in shortcutList" :key="item.id" :span="6">
								<el-button class="my-btn-max" :class="{maving:mavingIndex===key}"
									type="primary" :icon="item.icon">{{item.text}}</el-button>
							</el-col>
						</VueDraggable>
					</el-row>
				</el-card>
			</el-col>
		</el-row>

		<div style="height: 20px;"></div>

		<el-row :gutter="20">
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							本月采购下单额
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								197.8万元
							</template>
							<el-text>
								197.8万元
							</el-text>
						</el-tooltip>
					</div>
					<div class="image">
						<el-tooltip placement="bottom">
							<template #content>
								<div>
									<el-text>
										2023年01月01日-2023年12月31日
									</el-text>
								</div>
								<div>
									<el-text>
										订单总额(求和)
									</el-text>
									<el-text>
										1581.2万元
									</el-text>
								</div>
							</template>
							<el-image src="/images/j1.png"></el-image>
						</el-tooltip>

					</div>
					<div class="bottom">
						<el-text>
							环比增长率 -87.5%
							<el-icon :size="12" color="#67C23A">
								<CaretBottom />
							</el-icon>
						</el-text>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							本月采购下单量
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								274000元
							</template>
							<el-text>
								274000元
							</el-text>
						</el-tooltip>
					</div>
					<div class="image">
						<el-image src="/images/j2.png"></el-image>
					</div>
					<div class="bottom">
						<el-text>
							环比增长率 0%
							<!-- 						<el-icon :size="12" color="#67C23A">
                <CaretBottom />
              </el-icon> -->
						</el-text>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							本月采购付款
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								2家
							</template>
							<el-text>
								2家
							</el-text>
						</el-tooltip>
					</div>
					<div class="image">
						<el-image src="/images/j3.png"></el-image>
					</div>
					<div class="bottom">
						<el-text>
							环比增长率 -85.7143%
							<el-icon :size="12" color="#67C23A">
								<CaretBottom />
							</el-icon>
						</el-text>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							合作中供应商
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								16家
							</template>
							<el-text>
								16家
							</el-text>
						</el-tooltip>
					</div>
					<div class="bottom">
						<el-text></el-text>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<div style="height: 20px;"></div>

		<el-row :gutter="20">
			<el-col :span="6">
				<el-card style="height: 384px;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text size="large">
									待办事项
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<List :list="todosList"></List>
				</el-card>
			</el-col>
			<el-col :span="18">
				<el-card style="height: 384px;" shadow="hover" body-style="padding: 0;">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="font-size: 16px;">流程-我发起的</el-text>
							</div>
							<div class="right">
								<el-popover placement="bottom" :width="200" trigger="click">
									<template #reference>
										<el-button title="筛选" class="my-a"
											style="border: 1px solid #4db0e4;padding: 4px 6px;">
											<el-image style="width: 18px;height: 18px;"
												src="/images/svg/筛选.svg"></el-image>
										</el-button>
									</template>
									<!--  -->
								</el-popover>

								<Tab :list="tabList"></Tab>
								<el-divider direction="vertical" />
								<!--  -->
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-scrollbar style="height: 336px;">
						<div>
							<div v-for="(item,key) in reviewedList" :key="key"
								class="flex-space-between active px-20 py-10 b-b">
								<div class="left" style="flex: 1;">
									<el-text>
										{{item.id}}
									</el-text>
									<el-avatar style="margin: 0 5px 0 10px;">{{item.image}}</el-avatar>
									<div>
										<div>
											<el-text>
												{{item.title}}
											</el-text>
											<el-tooltip effect="light" content="任务分配于 2024-06-03 15:47" placement="top">
												<el-text type="info"
													style="margin-left: 5px;font-size: 12px;cursor: pointer;">
													{{item.time}}
												</el-text>
											</el-tooltip>
										</div>
										<div>
											<el-text>
												<el-link href="" type="info">
													<el-text type="info" style="font-size: 12px;">{{item.sub}}</el-text>
													<el-divider direction="vertical" />
													<el-text type="info"
														style="font-size: 12px;">{{item.user}}</el-text>
												</el-link>
											</el-text>
										</div>
									</div>
								</div>
								<div class="right" style="justify-content: space-between;flex: 1;">
									<div>
										<div>
											<el-text>{{item.node}}</el-text>
										</div>
										<div>
											<el-text :style="`color: ${item.nodeColor}`">{{item.isnode}}</el-text>
										</div>
									</div>
									<div>
										<el-tooltip effect="light" content="撤销" placement="top">
											<el-button :icon="TopLeft"></el-button>
										</el-tooltip>
										<el-tooltip effect="light" content="查看执行记录" placement="top">
											<el-button plain>
												<el-icon size="16px">
													<Tickets />
												</el-icon>
											</el-button>
										</el-tooltip>
									</div>
								</div>
							</div>
						</div>
					</el-scrollbar>
				</el-card>
			</el-col>
		</el-row>

		<div style="height: 20px;"></div>
		<el-card style="height: 384px;" shadow="hover" class="my">
			<template #header>
				<div class="flex-space-between">
					<div class="left">
						<el-text size="large">
							待发货 日程
						</el-text>
					</div>
					<div class="right">
						<el-tooltip placement="top" effect="light" content="更多">
							<div class="my-a">
								<el-icon color="#676967">
									<MoreFilled />
								</el-icon>
							</div>
						</el-tooltip>
					</div>
				</div>
			</template>
			<!--  -->
			<el-row>
				<el-col :span="13">
					<el-calendar ref="calendar">
						<template #header="{ date }">
							<div class="left">
								<el-button text type="info">
									<el-text style="margin-right: 5px;">
										{{date}}
									</el-text>
								</el-button>
							</div>
							<div class="right">
								<el-button style="margin: auto;" text type="info" @click="selectDate('prev-month')">
									<el-icon>
										<ArrowLeft />
									</el-icon>
								</el-button>
								<el-button style="margin: auto;" text type="info" @click="selectDate('today')">
									<el-text>今天</el-text>
								</el-button>
								<el-button style="margin: auto;" text type="info" @click="selectDate('next-month')">
									<el-icon>
										<ArrowRight />
									</el-icon>
								</el-button>
							</div>
						</template>
					</el-calendar>
				</el-col>
				<el-col :span="11">
					<el-empty description="暂无数据" :image-size="100" />
				</el-col>
			</el-row>
		</el-card>

		<div style="height: 20px;"></div>

		<div>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-input style="width: 240px" placeholder="搜索采购单号" :prefix-icon="Search" />
				</el-col>
				<el-col :span="6">
					<el-select multiple clearable collapse-tags placeholder="筛选采购状态" popper-class="custom-header"
						:max-collapse-tags="1" style="width: 240px">
						<template #header>
							<el-input style="width: 240px" placeholder="筛选采购状态" :prefix-icon="Search" />
						</template>
						<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-col>
				<el-col :span="6">
					<el-select multiple clearable collapse-tags placeholder="搜索供应商" popper-class="custom-header"
						:max-collapse-tags="1" style="width: 240px">
						<template #header>
							<el-input style="width: 240px" placeholder="搜索供应商" :prefix-icon="Search" />
						</template>
						<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-col>
				<el-col :span="6">
					<el-date-picker style="width: 300px;" type="daterange" range-separator="~" start-placeholder="筛选订单"
						end-placeholder="通过日期" />
				</el-col>
			</el-row>
		</div>

		<div style="height: 20px;"></div>

		<div class="p_myDiv4">
			<el-card style="height: 100%;" shadow="hover">
				<template #header>
					<div style="display: flex; justify-content: space-between;">
						<div>
							<span style="font-size: 16px;">采购订单</span> <span style="font-size: 14px;color: #9a9494">共 40
								条</span>
						</div>
						<div>
							<el-input style="width: 240px;margin-right: 5px;" placeholder="采购单号"
								:prefix-icon="Search" />

							<el-button type="primary">
								<el-icon size="18">
									<Plus />
								</el-icon>
							</el-button>
						</div>
					</div>
				</template>
				<el-table :data="tableData" style="width: 100%" height="470">
					<el-table-column fixed prop="date" label="Date" width="150" />
					<el-table-column prop="name" label="Name" width="120" />
					<el-table-column prop="state" label="State" width="120" />
					<el-table-column prop="city" label="City" width="320" />
					<el-table-column prop="address" label="Address" width="600" />
					<el-table-column prop="zip" label="Zip" width="120" />
				</el-table>
			</el-card>
		</div>

		<div style="height: 20px;"></div>

		<div class="p_myDiv4">
			<el-card style="height: 100%;" shadow="hover">
				<template #header>
					<div style="display: flex; justify-content: space-between;">
						<div>
							<span style="font-size: 16px;">供应商</span> <span style="font-size: 14px;color: #9a9494">共 4
								条</span>
						</div>
						<div>
							<el-input style="width: 240px;margin-right: 5px;" placeholder="供应商简称"
								:prefix-icon="Search" />

							<el-button type="primary">
								<el-icon size="18">
									<Plus />
								</el-icon>
							</el-button>
						</div>
					</div>
				</template>
				<el-table :data="tableData" style="width: 100%" height="470">
					<el-table-column fixed prop="date" label="Date" width="150" />
					<el-table-column prop="name" label="Name" width="120" />
					<el-table-column prop="state" label="State" width="120" />
					<el-table-column prop="city" label="City" width="320" />
					<el-table-column prop="address" label="Address" width="600" />
					<el-table-column prop="zip" label="Zip" width="120" />
				</el-table>
			</el-card>
		</div>

		<div style="height: 20px;"></div>

		<div class="p_myDiv4">
			<el-card style="height: 100%;" shadow="hover">
				<template #header>
					<div>
						<span style="font-size: 16px;">供货能力分析</span>
					</div>
				</template>
				<el-table :data="tableData" style="width: 100%" height="470">
					<el-table-column fixed prop="date" label="Date" width="150" />
					<el-table-column prop="name" label="Name" width="120" />
					<el-table-column prop="state" label="State" width="120" />
					<el-table-column prop="city" label="City" width="320" />
					<el-table-column prop="address" label="Address" width="600" />
					<el-table-column prop="zip" label="Zip" width="120" />
				</el-table>
			</el-card>
		</div>

		<div style="height: 20px;"></div>

		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									产品-销售排行
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart3" style="height: 400px;"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									客户-销售排行
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart4" style="height: 400px;"></div>
				</el-card>
			</el-col>
		</el-row>

 		<el-dialog append-to-body :show-close="false" :close-on-click-modal="false"
			class="flex-align" style="width: 100%;height: 100%;padding: 30px 24px;margin: 0;background: transparent;">
			<template #header>
				<el-card style="width: 100%;height: 100%;" body-style="padding: 0;" shadow="never">
					<template #header>
						<div class="flex-space-between">
							<div>
								<el-text style="font-size: 16px;">
									供应商管理
								</el-text>
							</div>
							<div>
								<el-button @click="">取消</el-button>
								<el-button @click="">
									保存并继续创建
									<el-icon style="margin-left: 4px;">
										<ArrowDown />
									</el-icon>
								</el-button>
								<el-button type="primary" @click="">
									保存
								</el-button>
							</div>
						</div>
					</template>
					<el-scrollbar :style="`height: calc(100vh - 69px - ( 30px + 30px));`">
<!--						<SupplierFrom style="padding: 16px;overflow: hidden;" />-->
					</el-scrollbar>

				</el-card>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { Search, Plus, MoreFilled, Position, CaretBottom, ArrowDown, Tickets, TopLeft, CirclePlusFilled, Histogram, Edit, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
	import * as echarts from "echarts";
	// import SupplierFrom from '../../components/proForm/SupplierFrom.vue';
	import List from '../../components/list/list.vue';
	import Tab from '../../components/tab/tab.vue';
	import { VueDraggable } from 'vue-draggable-plus';
	//
	import { useDialog,useMaving } from '../../utils/mixins';

	onMounted(() => {
		initEchart();
	});
	//弹出层
	// const { supplier_dialogVisible, openDialog, closeDialog } = useDialog();
	//拖拽
	const { mavingIndex, onStart, onEnd } = useMaving();

	//
	const initEchart = () => {
		// 基于准备好的dom，初始化echarts实例
		let myChart3 = echarts.init(echart3.value);
		let myChart4 = echarts.init(echart4.value);
		// 绘制图表
		myChart3.setOption(echartOption3);
		myChart4.setOption(echartOption4);
	}

	const echartOption3 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		dataset: {
			source: [
				[522.8, 'BELL贝尔温3*5米|在库734件', 'BELL贝尔温3*5米|在库734件'],
				[456.8, 'naturehike挪客3*4米|在库889件', 'naturehike挪客3*4米|在库889件'],
				[212.4, '克米特椅中号│在库692件', '克米特椅中号│在库692件'],
				[142.1, '克米特椅大号│在库681件', '克米特椅大号│在库681件'],
				[140.3, '松木蛋卷桌大号1.2m|在库543件', '松木蛋卷桌大号1.2m|在库543件'],
				[312.8, '铝合金蛋卷桌大号1.2m |在库508盒', '铝合金蛋卷桌大号1.2m |在库508盒']
			]
		},
		grid: { containLabel: true },
		xAxis: { name: '' },
		legend: {
			bottom: 0,
			data: ['订单总额']
		},
		yAxis: { type: 'category' },
		series: [
			{
				name: '订单总额',
				type: 'bar',
				color: '#88aafa',
				areaStyle: {
					color: '#ebf4ef'
				},
				label: {
					show: true,
					position: 'right',
					color: '#88aafa'
				},
				encode: {
					// Map the "amount" column to X axis.
					x: 'amount',
					// Map the "product" column to Y axis
					y: 'product'
				}
			}
		]
	};
	const echartOption4 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		dataset: {
			source: [
				[6.8, '海纳物流科技有限公司', '海纳物流科技有限公司'],
				[15.8, '创想教育科技有限公司', '创想教育科技有限公司'],
				[15.8, '大禹文化传媒有限公司', '大禹文化传媒有限公司'],
				[19, '酷酷酷', '酷酷酷'],
				[28.4, '绿色家居装饰有限公司', '绿色家居装饰有限公司'],
				[28.5, '艾默生电器有限公司', '艾默生电器有限公司'],
				[42.3, '飞跃广告传媒有限公司', '飞跃广告传媒有限公司'],
				[48.8, '泛海国际公司', '泛海国际公司'],
				[68.2, '星际科技有限公司', '星际科技有限公司'],
				[110.8, '卓中商务', '卓中商务'],
				[167.2, '宜居生态园林有限公司', '宜居生态园林有限公司'],
				[168.4, '泛海国际', '泛海国际'],
				[186.7, '精英人才服务有限公司', '精英人才服务有限公司'],
				[208.7, '融创房地产开发有限公司', '融创房地产开发有限公司'],
				[674.3, '事驰科技', '事驰科技'],
			]
		},
		grid: { containLabel: true },
		xAxis: { name: '' },
		legend: {
			bottom: 0,
			data: ['订单总额(求和)']
		},
		yAxis: { type: 'category' },
		series: [
			{
				name: '订单总额(求和)',
				type: 'bar',
				color: '#88aafa',
				areaStyle: {
					color: '#ebf4ef'
				},
				label: {
					show: true,
					position: 'right',
					color: '#88aafa'
				},
				encode: {
					// Map the "amount" column to X axis.
					x: 'amount',
					// Map the "product" column to Y axis
					y: 'product'
				}
			}
		]
	};

	const echart3 = ref();
	const echart4 = ref();

	const cities = ref([]);
	const shortcutList = ref([{
		id: 1,
		icon: Edit,
		text: '新建供应商' //
	}, {
		id: 2,
		icon: CirclePlusFilled,
		text: '新建采购单' //
	}, {
		id: 3,
		icon: CirclePlusFilled,
		text: '申请采购付款'//
	}, {
		id: 4,
		icon: Histogram,
		text: '采购回票录入'//
	}]);
	const todosList = ref([{
		title: '采购需求单',
		bage: 5,
		color: '#ff7919'
	}, {
		title: '在途采购单',
		bage: 12,
		color: '#40bd93'
	}, {
		title: '已延期采购单',
		bage: 15,
		color: '#fa9e00'
	}, {
		title: '待付款采购单',
		bage: 31,
		color: '#d23ce6'
	}, {
		title: '待回票采购单',
		bage: 3,
		color: '#6647ff'
	}, {
		title: '审核中采购单',
		bage: 5,
		color: '#3ea1f7'
	}, {
		title: '审核中到货单',
		bage: 6,
		color: '#3ea1f7'
	}]);
	//
	const tabList = ref([{
		title: '全部'
	}, {
		title: '执行中'
	}, {
		title: '已完成(同意)'
	}, {
		title: '已完成(不同意)'
	}, {
		title: '已取消'
	}, {
		title: '异常中'
	}]);
	//
	const reviewedList = ref([{
		id: 1,
		image: 'h',
		title: 'HB11073493的订单审批',
		time: '耗时1.3小时',
		sub: 'DD24060001_94,600.00元_审批中',
		user: '雄鑫',
		node: '主管审核',
		isnode: '待执行',
		nodeColor: '#f57f17',
	}, {
		id: 2,
		image: 'h',
		title: 'HB11073493的订单审批',
		time: '耗时3.5小时',
		sub: 'DD24060001_94,600.00元_审批中',
		user: '雄鑫',
		node: '主管审核',
		isnode: '待执行',
		nodeColor: '#f57f17',
	}, {
		id: 3,
		image: 'h',
		title: 'HB11073493的采购到货审批',
		time: '耗时6秒',
		sub: '预计2024-06-05到货',
		user: '叽叽叽_CG24060001',
		node: '库管审批',
		isnode: '确认入库',
		nodeColor: '#f57f17',
	}, {
		id: 4,
		image: 'h',
		title: 'HB11073493的采购审批',
		time: '耗时9秒',
		sub: 'CG24060001_ 1666500元_叽叽叽',
		user: '雄鑫',
		node: '采购主管审批',
		isnode: '同意采购',
		nodeColor: '#f57f17',
	}]);

	// 页面log名字
	const title = ref('采购工作台');

	const tableData = ref([]);
	const calendar = ref();
	const selectDate = (val : any) => {
		if (!calendar.value) return;
		calendar.value.selectDate(val);
	}
</script>

<style>
	@import '../../assets/css/index.css';
</style>

<style scoped lang="scss">
	@import '../../assets/css/index.scss';
</style>